<!-- 我的卡券 -->

<template>
    <div class="voucher-container">
      <van-row class="top-bar" type="flex" style="margin:0; padding: 0;">
        <van-col span="24" type="flex">
          <van-nav-bar title="中奖记录" left-arrow @click-left="onClickLeft">
            <!-- <template #right v-if="!($route.query.type == 'activity')">
              <van-icon name="home-o" size="18" @click="toIndex" />
              <span style="color:#1989fa;" @click="toIndex">首页</span>
            </template> -->
          </van-nav-bar>
        </van-col>
      </van-row>
      <div>
        <van-list v-model="listLoading" :finished="listFinished" offset="10" finished-text="没有更多了">
          <van-row class="card-list-container">
            <van-row
              v-for="(item, index) in cardList"
              type="flex"
              :key="index"
              style="margin-left: 5px; margin-right:5px;margin-bottom: 5px; padding-bottom: 10px ;background-color: #ffffff;"
            >

              <van-col span="13" class="nameClass" style=" margin:20px 0px 0px 0px ;" @click="cardinfo(item)">
                <van-row style="padding: 0px;">
                  <van-col>
                    <span style="font-size: 15px;">{{ item.goodsName }}</span>
                  </van-col>
                </van-row>
                <van-row style="text-align: left;padding:0; color:#999999;margin-top:5px;">
                  {{ item.addTime }}
                </van-row>
              </van-col>
            </van-row>
          </van-row>
        </van-list>
      </div>
    </div>
  </template>

  <script>
  // 请求接口
  import {
    winningRecord
  } from '@/api/raffle.js'
  import QRCode from 'qrcodejs2'
  import JsBarcode from 'jsbarcode'
  import { Dialog } from 'vant'
  export default {
    data() {
      return {
        popupShow: false,
        selectShow: true,
        ewmShow: false,
        cardList: [],
        gridNumber: -2,
        otherQrcode: 0,
        showCode: false,
        secretStr: '',
        timeStamp: '',
        current: 1,
        total: 0,
        pages: 0,
        listLoading: false,
        listFinished: true,
        showOtherCode: false,
        showOtherQRCode: false,
        otherCardNumber: '',
        otherCardPass: '',
        cardName: '',
        otherCardUseMethod: '',
        cardData: '',
        showOnlySecretCode: false,
        onlyScrect: '',
        showOtherQrcode: false,
        myQrcode: '',
        showBarcode: false,
        onlyScrectList: null,
        fxzs: false,
        orderStatus: '-2', // -2全部 0待付款 201已付款 401已退款
        limit: 10,
        orderType: 4, //4卡卷订单 1普通订单 5积分订单
        orderId: '',
        activityId:""
      }
    },
    computed: {},
    mounted() {
      console.log(this.$route.query)
      this.activityId = this.$route.query.id
      this.initData()
    },
    methods: {
      cardinfo(item) {
        if(item.goodsType==98){
            Dialog.alert({
                title: '提示',
                message: '请到微信-卡包-券和礼品卡查看',
                }).then(() => {
                // on close
            });
        }else if(item.goodsType==1){
          this.$router.push({
              path: '/cardInfo?orderSn=' + item.orderSn
          })
        }else{

        }
      },
      closeClick() {
        this.popupShow = false
        this.selectShow = true
        this.ewmShow = false
      },
      cancelClick() {
        this.popupShow = false
        this.selectShow = true
        this.ewmShow = false
      },
      bindingCardClick() {
        this.ewmShow = true
        this.selectShow = false
      },
      changeData(id) {
        updateUserCard({
          id: id
        })
          .then(res => {
            if (res.code == 0) {
              this.initData()
            }
          })
          .catch(res => {})
      },
      popupNews(content, id) {
        Dialog.confirm({
          title: '信息提示',
          message: content
        })
          .then(() => {
            // on confirm
            this.changeData(id)
          })
          .catch(() => {
            // on cancel
          })
      },
      //切换卡券状态
      // stateChange(sid, num) {
      //   if (num == 1) {
      //     this.popupNews('卡券即将放入待使用', sid)
      //   } else if (num == 2) {
      //     this.popupNews('卡券即将放入已使用', sid)
      //   }
      // },
      initData() {
        this.listLoading = true
        let data = {
          activityId:this.activityId
        }
        winningRecord(data)
          .then(res => {
            this.cardList = res.data
          })
          .catch(res => {
            this.$toast({
              message: res.msg,
              position: 'center',
              duration: 2500
            })
          })
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      },
      copyString(param) {
        this.$copyText(param)
          .then(res => {
            this.showToast('复制成功！')
          })
          .catch(err => {
            this.showToast('复制失败！')
          })
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      qrcode(id, str, timeStamp) {
        this.myQrcode = new QRCode('qrcode', {
          width: 150,
          height: 150, // 高度
          text: id + str + timeStamp, // 二维码内容
          render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        })
      },
      cancelShowCode() {
        this.showCode = !this.showCode
      },
      initRecordsData(res) {
        this.cardList = []
        this.cardList = res.data
        this.total = res.data.total
        this.pages = res.data.pages
      },
      clearPageInfo() {
        this.current = 1
        this.total = 0
        this.pages = 0
      },
      toIndex() {
        this.$router.push({
          path: '/home'
        })
      },
      // 取消展示第三方卡号密钥
      cancelShowOtherCode() {
        this.showOtherCode = false
      },
      // 取消展示第三方纯密钥卡券
      cancelShowOnlySecretCode() {
        this.showOnlySecretCode = false
      },
      paytap(id) {
        console.log(id, 'sssss')
        this.orderId = id
        this.beginPay(id)
      },
      canceltap(id) {
        console.log(id, 'aaaaa')
        this.orderId = id
        Dialog.confirm({
          title: '提示',
          message: '是否确认取消订单'
        })
          .then(() => {
            setCancelOrder({
              orderId: this.orderId
            }).then(res => {
              this.showToast(res.msg)
              this.cardList = []
              this.initData()
            })
          })
          .catch(() => {})
      },

      beginPay(orderId) {
        // 微信支付
        const prePayData = {
          orderId: this.orderId,
          tradeType: 'JSAPI'
        }
        // 预支付，通过后台创建微信支付订单，并获取本次微信支付信息
        PrePay(prePayData)
          .then(res => {
            console.log(res, '预支付')
            if (res.msg === 'success') {
              if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
                }
              } else {
                this.onBridgeReady(res.data)
                // setTimeout(this.$router.push({
                //   path: '/Voucher?id=1'
                // }), 2500)
              }
            }
          })
          .catch(res => {
            this.showToast(res.msg)
          })
      },
      onBridgeReady(data) {
        const that = this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.packageValue, // 微信订单id
            signType: 'MD5', // 微信签名方式：
            paySign: data.paySign // 微信签名
          },
          function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              // 付款成功
              that.initData()
            } else {
              that.showToast('未完成支付...')
              setTimeout(
                that.$router.push({
                  path: '/Voucher'
                }),
                2500
              )
            }
          }
        )
      }
    }
  }
  </script>

  <style lang="scss">
  .button-click {
    display: flex;
  }

  .voucher-container {
    .van-row {
      padding: 0 15px 0 15px;
    }

    .card-list-container {
      padding: 0;
    }

    .van-overlay {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }

    #qrcode img {
      padding: 5px;
      background-color: #ffffff;
    }

    #barcode {
      width: 90%;
      height: 90px;
    }

    .gridRed {
      color: red;
    }
  }

  .stayUseBody {
    display: flex;
    // padding-left: 100px;
    margin-top: 2px;
  }

  .stayUseYi {
    width: 60px;
    background: linear-gradient(5deg, #d90f18, #f68b40);
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 4px;
    text-align: center;
    font-size: 12px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
  }

  .stayUse-success {
    width: 60px;
    background-color: rgb(66, 153, 46);
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 4px;
    text-align: center;
    font-size: 12px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
  }

  .stayUse-cancel {
    width: 60px;
    background-color: rgb(150, 151, 153);
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 4px;
    text-align: center;
    font-size: 12px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
  }

  .stayUseEr {
    width: 60px;
    background: linear-gradient(5deg, #ffd01e, #ff8917);
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 3px;
    text-align: center;
    font-size: 10px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
  }

  .stayUseSan {
    width: 60px;
    background-color: rgb(150, 151, 153);
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 3px;
    text-align: center;
    font-size: 12px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
  }

  .nameClass {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .stayUseSan {
    width: 60px;
    background: #969799;
    height: 23px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    padding: 0px 3px;
    text-align: center;
    font-size: 12px;
    display: -webkit-inline-flex;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
  }

  .textClass {
    margin-top: 10px;
  }

  .textClass img {
    width: 100%;
  }

  .syStyle {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .getSuccess_close {
    width: 50px;
    height: 50px;
    margin-top: 14px;
  }

  .getSuccess_ewm_text {
    font-size: 21px;
    font-weight: bold;
    color: #333333;
    margin-top: 64px;
    letter-spacing: 1px;
  }

  .getSuccess_ewm_img {
    width: 150px;
    height: 150px;
    margin-top: 34px;
  }

  .getSuccess_ewm {
    width: 284px;
    height: 310px;
    background: url(../../../static/activities/activation_ewm_images.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .getSuccess_button_span {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #ffffff;
    text-align: center;
    margin-top: 33px;
  }

  .getSuccess_button_text {
    width: 124px;
    height: 46px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    color: #ffffff;
    background: url(../../../static/activities/activation_images_button.png) no-repeat;
    background-size: 100% 100%;
  }

  .getSuccess_button_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 174px 10px 0 10px;
  }

  .getSuccess_button {
    width: 284px;
    height: 310px;
    background: url(../../../static/activities/activation_button_images.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
  }

  .getSuccess {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
  }
  </style>
